<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		/*.red {
			background-color: red;
			BACKGROUND-COLOR: RED;
		}*/

		.table {
			border-collapse: collapse;
			width: 60%;
		}

		.table tbody tr:hover {
			background-color: #ccc;
		}

		/* css3 */
		/* .table tbody tr:nth-child(even) {
			background-color: #eee;
		} */

		.bg-eee {
			background-color: #eee;
		}

		.table, td, th {
			border: 1px solid red;
		}

		.table td, .table th {
			height: 35px;
			text-align: center;
		}
	</style>

	<script>
		// alert('Hello WBC!');
	</script>
	<!-- <script src="js/demo1.js"></script> -->
</head>
<body>

	<table class="table" style="display:none">
		<thead>
			<tr>
				<th>姓名</th>
				<th>年龄</th>
				<th>性别</th>
				<th>邮箱</th>
				<th>电话</th>
			</tr>
		</thead>
		<tbody id="tableBody">
			<!-- <tr>
				<td>111</td>
				<td>222</td>
				<td>333</td>
				<td>444</td>
				<td>555</td>
			</tr>
			<tr>
				<td>111</td>
				<td>222</td>
				<td>333</td>
				<td>444</td>
				<td>555</td>
			</tr>
			<tr>
				<td>111</td>
				<td>222</td>
				<td>333</td>
				<td>444</td>
				<td>555</td>
			</tr>
			<tr>
				<td>111</td>
				<td>222</td>
				<td>333</td>
				<td>444</td>
				<td>555</td>
			</tr>
			<tr>
				<td>111</td>
				<td>222</td>
				<td>333</td>
				<td>444</td>
				<td>555</td>
			</tr>
			<tr>
				<td>111</td>
				<td>222</td>
				<td>333</td>
				<td>444</td>
				<td>555</td>
			</tr> -->
		</tbody>
	</table>

	<script>
		var data = [
			{name: '张三', age: 20, gender: '男', email: 'zs@126.com', phone: '12345678910'},
			{name: '张三2', age: 22, gender: '男', email: 'zs@126.com', phone: '12345678910'},
			{name: '张三3', age: 40, gender: '女', email: 'zs@126.com', phone: '12345678910'},
			{name: '张三4', age: 10, gender: '男', email: 'zs@126.com', phone: '12345678910'},
			{name: '张三5', age: 50, gender: '女', email: 'zs@126.com', phone: '12345678910'},
			{name: '张三6', age: 23, gender: '男', email: 'zs@126.com', phone: '12345678910'},
			{name: '张三7', age: 28, gender: '女', email: 'zs@126.com', phone: '12345678910'},
			{name: '张三8', age: 26, gender: '男', email: 'zs@126.com', phone: '12345678910'},
			{name: '张三9', age: 20, gender: '女', email: 'zs@126.com', phone: '12345678910'},
			{name: '张三0', age: 29, gender: '男', email: 'zs@126.com', phone: '12345678910'}
		];

		function initTable(data) {
			var trArr = [], i, len = data.length;
			var tableBody = document.getElementById('tableBody');
			var bg = '';
			for (i=0; i<len; i++) {

				if (i % 2 == 1) {
					bg = 'bg-eee';
				} else {
					bg = '';
				}

				trArr.push(
					'<tr class="', bg, '">',
						'<td>', data[i].name, '</td>',
						'<td>', data[i].age, '</td>',
						'<td>', data[i].gender, '</td>',
						'<td>444</td>',
						'<td>555</td>',
					'</tr>'
				);
			}

			tableBody.innerHTML = trArr.join('');
		}

		// initTable(data);
	</script>

	<!-- <button onclick="alert('我被点击了5555555555555！')">my btn</button>
	<button onclick="document.write('<h1>我是一个标题！</h1>')">my btn2</button>
	<button onclick="change()">my btn3</button>

	<hr> -->

	<!-- <HR> -->

	<!-- <div id="myDiv">
		loading...
	</div>
	
	<script>
		function change() {
			var myDiv = document.getElementById('myDiv');
			myDiv.innerHTML = '<h1 class="red">我是新填充的内容。。。</h1>';
		}
	</script> -->

	<!--<script>
		alert('Hello WBC!');
	</script>

	<script src="js/demo1.js"></script>-->

	<script>
		/*function startWith(str, letter) {

			if (str.indexOf(letter) == 0) {
				return true;
			}

			return false;
		}

		var r = startWith('abc', 'b');
		console.log(r);*/

		/*function quchong(arr) {

			return [];
		}

		var r = quchong([3, 9, 3, 2, 2, 3]);
		console.log(r);*/

		// onsubmit
		// 
		// arguments, this
		// 
		// 

	</script>

</body>
</html>